<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 最上面模板 -->
         <div class="articles">
          <div class="left">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="关键字">
            <el-input v-model="formInline.keyword" placeholder="根据关键字搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态">
             <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
           <el-button @click="eliminate">清除</el-button>
           <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
        </div>
       <div class="right">
         <el-button  class="el-icon-edit" type="success"  @click="addDialog = true">新增技巧</el-button>
       </div>
        </div>
        <!-- 小提示栏 -->
        <el-alert :closable="false" :title="title" type="info" show-icon></el-alert>

      <!-- 页面铺设 -->
       <el-table :data="items" style="width: 100%">
        <el-table-column type="index" prop="date" label="序号" ></el-table-column>
        <el-table-column prop="title" label="文章标题" ></el-table-column>
        <el-table-column prop="visits" label="阅读人数" ></el-table-column>
        <el-table-column prop="username" label="录入人" ></el-table-column>
        <el-table-column prop="createTime" label="录入时间" >
          <template slot-scope="{ row }">
              <span>{{ row.createTime | parseTime }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"  :formatter="statusarticles"></el-table-column>
        <el-table-column prop="date" label="操作" >
           <template #default="{ row }" >
              <el-button type="text" @click="Preview(row.id)">预览</el-button>
              <el-button type="text"  @click="handleStatus(row)">
              {{
                row.state === 1 ? "禁用" : "启用"
              }}
              </el-button>
              <el-button type="text" :disabled="row.state === 0" @click="editBtn(row.id)">修改</el-button>
              <el-button type="text"  @click="articlesremove(row.id)" >删除</el-button>
            </template>
        </el-table-column>

        </el-table>

        <!-- 分页功能 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout="prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>

        <!-- 新增文章弹层 -->
        <articles-add
         :add-dialog.sync="addDialog"
         @addForm="getlist"
         ref="articlesAdd"
        />
         <!-- 预览弹层 -->
        <Articlespreview :show-dialog.sync="showDialog" ref="Dialog" />
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入接口
import { list, remove, changeState } from '@/api/hmmm/articles.js'
// 时间过滤器
// import { parseTime } from '@/filters'
// 题型枚举
import { status } from '@/api/hmmm/constants.js'
// 新增文章弹窗
import ArticlesAdd from '../components/articles-add.vue'
// 预览弹层
import Articlespreview from '../components/articles-preview.vue'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      page: {
        page: 1,
        pagesize: 10
      },
      items: [],
      counts: 0,
      addDialog: false, // 添加弹层
      showDialog: false // 预览弹层
    }
  },

  // 提示条
  computed: {
    title () {
      return `数据一共${this.counts}条`
    }
  },
  components: {
    ArticlesAdd,
    Articlespreview
  },
  created () {
    this.getlist()
  },
  methods: {
    // 修改文章
    editBtn (id) {
      this.$refs.articlesAdd.editArticles(id)
      // 2.打开弹层
      this.addDialog = true
    },
    // 禁用和启用
    async handleStatus (row) {
      const status = row.state ? '禁用' : '启用'
      try {
        await this.$confirm(`您确定${status}该文章吗`, '提示', {
          type: 'warning'
        })
        row.state === 1 ? (row.state = 0) : (row.state = 1)
        await changeState(row)
        this.$message.success(`${status}成功 !`)
        await this.getlist()
      } catch (error) {
        this.$message.error(`${status}失败 !`)
      }
    },
    // 预览
    async Preview (id) {
      this.showDialog = true
      this.$refs.Dialog.getArticlesDetail(id)
    },
    // 搜索按钮
    async search () {
      const { data } = await list(this.formInline)
      console.log(data)
      this.items = data.items
      this.counts = data.counts
    },
    // 清除按钮
    eliminate () {
      this.formInline = {
        keyword: '',
        state: null
      }
    },
    // 状态
    statusarticles (row, column, cellvalue, index) {
      return status.find((item) => item.value === +cellvalue)?.label || '未知'
    },
    // 删除文章列表
    articlesremove (id) {
      this.$confirm('你确定要删除吗？', '温馨提示').then(async () => {
        await remove({ id })
        if (this.items.length === 1 && this.page > 1) {
          this.pageObj.page--
        }
        this.$message.success('删除成功')
        this.getlist()
      })
    },
    // 获取文章列表
    async getlist () {
      const { data } = await list(this.page)
      console.log(data)
      this.items = data.items
      this.counts = data.counts
    },
    // 分页功能
    handleSizeChange (val) {
      this.page.pagesize = val
      this.page.page = 1
      this.getlist()
    },
    // 分页功能
    handleCurrentChange (val) {
      this.page.page = val
      this.getlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.articles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tips {
    line-height: 34px;
    padding: 0px 15px;
    border-radius: 5px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
    i {
      margin-right: 10px;
      color: #409eff;
    }
  }
}
</style>
